<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/util/jquery-1.4.4.js">
        </script>
        <script type="text/javascript" src="js/util/jquery.validate.min.js">
        </script>
        <title>
            Insert title here
        </title>
    </head>
    
    <body>
        <br>
        <!-- 表单校验功能 -->
        <form class="cmxform" id="signupForm" method="get" action="">
            <fieldset>
                <legend>
                    字段校验、日历控件完整示例
                </legend>
                <table>
                    <tr>
                        <td>
                            <label for="username">
                                Username
                            </label>
                        </td>
                        <td>
                            <input id="username" name="username" />
                        </td>
                        <!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 -->
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">
                                Password
                            </label>
                        </td>
                        <td>
                            <input id="password" name="password" type="password" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="confirm_password">
                                Confirm password
                            </label>
                        </td>
                        <td>
                            <input id="confirm_password" name="confirm_password" type="password" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="sex">
                                sex
                            </label>
                        </td>
                        <td>
                                男<input id="sex1" name="sex" type="radio" />
                               女 <input id="sex2" name="sex" type="radio" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="email">
                                Email
                            </label>
                        </td>
                        <td>
                            <input id="email" name="email" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="upload">
                                Upload
                            </label>
                        </td>
                        <td>
                            <input type="file" name="upload" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="language">
                                language
                            </label>
                        </td>
                        <td>
                            <input type="checkbox" name="language" value="cn" />
                            汉语
                            <input type="checkbox" name="language" value="en" />
                            英语
                            <input type="checkbox" name="language" value="jp" />
                            日语
                            <input type="checkbox" name="language" value="ge" />
                            德语
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="book">
                                book
                            </label>
                        </td>
                        <td>
                            <select name="book" multiple="multiple">
                                <option value="en">
                                    英语书
                                </option>
                                <option value="cn">
                                    汉语书
                                </option>
                                <option value="jp">
                                    日语书
                                </option>
                                <option value="ge">
                                    德语书
                                </option>
                            </select>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="agree">
                                同意该协议
                            </label>
                        </td>
                        <td>
                            <input type="checkbox" class="checkbox" id="agree" name="agree" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="submit" type="submit" value="Submit" />
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </body>

</html>
<script>
    $(document).ready(function() {
        //通过id查找要进行校验的表单
        $("#signupForm").validate({
            //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
            //onsubmit:false,
            //onfocusout:false,
            //onkeyup:false,
            //onclick:false,

            //验证通过后执行的动作
            //success:function(label){
            //    label.text("ok!").addClass("success");
            //},
            //手动设置错误信息的显示方式
            errorPlacement: function(error, element) {
                error.appendTo(element.parent().next());
                //    if ( element.is(":radio") )
                //        error.appendTo( element.siblings("span") );
                //    else if ( element.is(":checkbox") ){
                //        error.appendTo ( element.siblings("span") );
                //    }
                //        else
                //        error.appendTo( element.parent() );
            },
            rules: {
                username: {
                    required: true,
                    rangelength: [5, 7]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                sex: {
                    required: true
                },

                email: {
                    required: true,
                    email: true
                },
                language: {
                    required: true,
                    rangelength: [2, 3]
                },
                book: {
                    required: true,
                    rangelength: [2, 3]
                },
                agree: "required",
                upload: {
                    required: true,
                    accept: "flv|jpg"
                }
            },
            //校验提示信息
            messages: {
                username: {
                    required: "请输入用户名",
                    rangelength: "用户名长度必须为{0}到{1}个字符或汉字"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码的最小长度是{0}个字符"
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码的最小长度是{0}个字符",
                    equalTo: "确认密码与密码不相等"
                },
                email: "请输入正确的邮箱",
                language: {
                    required: "该项必须填写",
                    rangelength: "请您选择{0}到{1}项语言"
                },
                book: {
                    required: "该项必须选择",
                    rangelength: "请您选择{0}到{1}本书"
                },
                agree: "您没有同意使用协议",
                upload: {
                    required: "请输入上传文件的路径",
                    accept: "上传文件的格式只能是 flv或jpg"
                }
            }
        });
    });
</script>